revision:
Creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML's <a> element, as SVG's <a> element is a container, which means you can create a link around text (like in HTML), but also around any shape. Attributes: download, href, hreflang, ping, referrerpolicy, rel, target, type, xlink:href
codes:
<svg viewBox="0 0 100 80">
<!-- A link around a shape -->
<a href="https://lwitters.com">
<circle cx="40" cy="30" r="25"/>
</a>
<!-- A link around a text -->
<a href="https://lwitters.com">
<text x="30" y="70" text-anchor="middle"> <circle></text>
</a>
</svg>
Used to store graphical objects that will be used at a later time. Objects created inside a <defs> element are not rendered directly. To display them you have to reference them (with a <use> element for example).
codes:
<svg viewBox="0 0 10 7">
<!-- Some graphical objects to use -->
<defs>
<circle id="myCircle" cx="0" cy="0" r="3" />
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="30%" stop-color="gold" />
<stop offset="90%" stop-color="green" />
</linearGradient>
</defs>
<!-- using my graphical objects -->
<use x="5" y="3" href="#myCircle" fill="url('#myGradient')" />
</svg>
Is a container used to group other SVG elements. Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children. It can also group multiple elements to be referenced later with the <use> element. Attributes: only includes global attributes.
codes:
<svg viewBox="0 0 100 50">
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="3">
<circle cx="20" cy="20" r="15" />
<circle cx="30" cy="30" r="15" />
</g>
</svg>
Defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon> element. Markers are attached to shapes using the marker-start, marker-mid, and marker-end properties. Attributes: markerHeight, markerUnits, markerWidth, orient, pteserveAspectRatio, refX, refY, viewbox
codes:
<svg viewBox="0 0 100 100">
<defs>
<!-- arrowhead marker definition -->
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6"
markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<!-- simple dot marker definition -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- Coordinate axes with a arrowhead in both direction -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<!-- Data line with polymarkers -->
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" />
</svg>
Defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the "mask property". Attributes: height, maskContentUnits, maskUnits, x, y, width
codes:
<svg viewBox="-10 -10 120 120">
<mask id="myMask">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95
Q10,65,10,35 Z" fill="black" />
</mask>
<polygon points="-10,110 110,110 110,-10" fill="orange" />
<!-- with this mask applied, we "punch" a heart shape hole into the circle -->
<circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>
This element's content is rendered, if for a given character the font doesn't define an appropriate <glyph>. The element isdeprecated - no longer recommended. Attributes: d, horiz-adv-x, vert-origin-x, vert-origin-y, vert-adv-y
Defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area. The <pattern> is referenced by the "fill" and/or "stroke" attributes on other graphics elements to fill or stroke those elements with the referenced pattern. Attributes: height, patternContentUnits, patternTransform, patternUnits, preserveAspectRatio, viewbox, width, x, xlink:ref, y
codes:
<svg viewBox="0 0 230 100">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>
Defines anew coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. Attributes: height, preserveAspectRatio, viewBox, width, x, y
codes:
<svg viewBox="0 0 300 100" stroke="red" fill="grey">
<circle cx="50" cy="50" r="40" />
<circle cx="150" cy="50" r="4" />
<svg viewBox="0 0 10 10" x="200" width="100">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
Evaluates any "requiredFeatures", "requiredExtensions" and "systemLanguage" attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true. Other direct children will be bypassed and therefore not rendered. If a child element is a container element - like <g> - then its subtree is also processed/rendered or bypassed/not rendered. Attributes: global attributes
codes:
<svg viewBox="0 -20 100 50">
<switch>
<text systemLanguage="ar">مرحبا</text>
<text systemLanguage="de,nl">Hallo!</text>
<text systemLanguage="en-us">Howdy!</text>
<text systemLanguage="en-gb">Wotcha!</text>
<text systemLanguage="en-au">G'day!</text>
<text systemLanguage="en">Hello!</text>
<text systemLanguage="es">Hola!</text>
<text systemLanguage="fr">Bonjour!</text>
<text systemLanguage="ja">こんにちは</text>
<text systemLanguage="ru">Привет!</text>
<text>☺</text>
</switch>
</svg>
Is used to define graphical template objects which can be instantiated by a <use> element. The use of <symbol> elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as Braille, and thus promote accessibility.Attributes: height, preserveAspectRatio, refX, refY, viewBox, width, x, y
codes:
<svg viewBox="0 0 80 20">
<!-- Our symbol in its own coordinate system -->
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- A grid to materialize our symbol positioning -->
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
fill="none" stroke="pink" />
<!-- All instances of our symbol -->
<use href="#myDot" x="5" y="5" style="opacity:1.0" />
<use href="#myDot" x="20" y="5" style="opacity:0.8" />
<use href="#myDot" x="35" y="5" style="opacity:0.6" />
<use href="#myDot" x="50" y="5" style="opacity:0.4" />
<use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>